<template>
    <div class="menu">
        <el-menu :default-active="active"
                 :default-openeds="menuData.defOpenIndex"
                 class="custom-menu"
                 ref="menu"
                 @select="_onSelect"
        >
            <component
                    :class="(item.children&&item.children.length>0&&!item.disabled)?'menu-item menu-border':'menu-item menu-self-border'"
                    v-for="(item) in menuData.menusTree" :key="item.id"
                    :index="item.path||'_'+item.id"
                    :is="(item.children&&item.children.length>0&&!item.disabled)?'el-submenu':'el-menu-item'">
                <template v-if="!item.children||item.children.length==0||item.disabled">
                    <i class="item-icon" :class="item.path"></i>
                    <span slot="title">{{item.menuName}}</span>
                </template>
                <template v-if="item.children&&item.children.length>0&&!item.disabled">
                    <template slot="title">
                        <i class="item-icon" :class="item.path"></i>
                        <span>{{item.menuName}}</span>
                    </template>
                    <el-menu-item v-for="v in item.children" :key="v.id" :index="v.path||'_'+v.id"
                                  class="menu-children-border">
                        <i class="item-icon" :class="v.path"></i>
                        <span slot="title">{{v.menuName}}</span>
                    </el-menu-item>
                </template>
            </component>
        </el-menu>
    </div>

</template>

<script>


import Vue from 'vue';


export default {
  menuName: 'AsideMenu',
  data() {
    return {
      openIndex: [],
      active: ''
    }
  },
  watch: {
    activeMenu: {
      handler(val, oldVal) {
        if (val&&val.length>0) {
          this.$emit('onActive', val[0], val[1], oldVal);
          this.active = val[0].path;
        }
      }
    }
  },
  computed: {
    defaultActive() {
      return this.$store.getters.getDefaultActive;
    },
    activeMenu() {
      return this.$store.getters.getActiveMenu;
    },
    menuData() {
      return this.$store.getters.getMenuData;
    },
    loginInfo() {
      return this.$store.getters.getLoginInfo
    }
  },
  methods: {
    _onSelect(index, paths) {
      this.$store.commit('setActiveMenu', [index]);

      // this.$store.dispatch('setRouterAlive', false);
      // this.$nextTick(function() {
      //   this.$store.dispatch('setRouterAlive', true);
      // });
      this.$store.state.home.dialogVisible = false;
      this.$store.state.home.params = null;

      // this.$emit('onActive', index, from, params);
      localStorage.setItem('menu_active', index);
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.active = this.defaultActive;// this.menuData.menusTree[0].path;
      // if (this.loginInfo && 'admin' === this.loginInfo.name && this.loginInfo.id !== -1) {
      //   this.active = 'page'
      // } else {
      //   this.active = this.menuData.menusTree[0].children?this.menuData.menusTree[0].children[0].path:this.menuData.menusTree[0].path;
      // }
      this.$store.commit('setActiveMenu', [this.active]);

      // this._onSelect(this.active);
    })
  },
  created() {
    // this.menus = this.$store.state.authority.menuData;

    // console.info(this.menus)
    // this.menus = Menu;

    // if (this.menuData.menusTree.length === 0) {
    //   //   this.menus = Menu.menus[0].children;
    //   this.defOpenIndex();
    // } else {
    //   this.defOpenIndex();
    // }
    // this.menuList = this._formatTree(this.menus);

    Vue.prototype.$CuMenu = this;
    window.$CuMenu = this;
  },
}
</script>

<style scoped>
    .menu /deep/ * {
        box-sizing: border-box;
    }

    .menu {
        height: 100%;
        background: transparent;
        box-sizing: border-box;
    }

    .menu-inner {
        overflow: hidden;
        width: 100%;
        background: #20272d;
    }


    .menu-button {
        transition: .5s;
        float: left;
        display: inline-block;
        position: relative;
        width: 45px;
        height: 45px;
        cursor: pointer;
        border-right: 1px solid #797979;
    }

    .menu-button .menu-icon {
        border: 1px solid transparent;
        position: absolute;
        top: calc(50% - 10px);
        left: calc(50% - 10px);
        width: 20px;
        height: 20px;
    }

    .item-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: -4px;
        margin-right: 4px;
        background-size: 100%;
        background-repeat: no-repeat;

    }


    .custom-menu {
        background-color: #fff;
        border-width: 0;
        overflow: hidden;
    }

    .custom-menu /deep/ .menu-self-border {
        border-bottom: 0;
        font-weight: bold;
    }

    .custom-menu /deep/ .menu-border .el-submenu__title {
        border-bottom: 0;
        font-weight: bold;
    }

    .custom-menu /deep/ .menu-children-border {
    }

    .custom-menu /deep/ .menu-border:last-child .el-submenu__title {
        border-width: 0;

    }

    .custom-menu /deep/ .el-submenu .el-menu-item {
        height: 45px;
        line-height: 45px;
        min-width: auto;
    }

    .custom-menu /deep/ .el-menu {
        background-color: #fff;
    }

    .custom-menu /deep/ .el-menu-item.is-active {
        color: #283851;

        background: #e7f0ff !important;
    }

    .custom-menu /deep/ .el-menu-item.is-active:before {
        content: "";
        display: block;
        width: 4px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background: #389fc0;
        border-radius: 1px;
    }

    .custom-menu /deep/ .el-menu-item:focus, .el-menu-item:hover {
        color: #283851;
        background-color: #e7f0ff !important;
    }

    .custom-menu /deep/ .el-submenu .el-submenu__title:focus, .custom-menu /deep/ .el-submenu .el-submenu__title:hover {
        color: #283851;
        background-color: #e7f0ff !important;
    }

</style>
<style>

</style>
